Skip to content

Integrate the dual-editor in vanilla-web-component (Updated) - #528

Merged
lornakelly merged 3 commits into
open-workflow-specification:mainfrom
kumaradityaraj:dualVanilaEditorUpdated
Nov 11, 2026
Merged

Integrate the dual-editor in vanilla-web-component (Updated)#528
lornakelly merged 3 commits into
open-workflow-specification:mainfrom
kumaradityaraj:dualVanilaEditorUpdated

Conversation

@kumaradityaraj

@kumaradityaraj kumaradityaraj commented Nov 10, 2026

Copy link
Copy Markdown
Contributor

closes - #369

This PR is update to - #516

Summary

  • Integrate @openworkflowspec/dual-editor into the Vanilla Web Component example.
  • Update the custom element to provide the language-service worker and support JSON/YAML modes.
  • Demonstrate both the text and diagram panes in the example page.
  • Keep the custom element’s content property synchronized with edits so external content updates reset both panes.
  • Add unit and browser coverage for mounting, editing, synchronization, and JSON schema diagnostics.
  • Document the Monaco hover workaround for Shadow DOM consumers.
  • Keep the example scoped to a single editor instance; multiple-instance support is not included.
    Verification

@kumaradityaraj
Updated dual editor
53ea229 
Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>
Copilot AI balanced review requested due to automatic review settings November 10, 2026 09:13
@changeset-bot

changeset-bot Bot commented Nov 10, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 45a6af9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify

netlify Bot commented Nov 10, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for openworkflow-editor canceled.

Name Link
🔨 Latest commit 45a6af9
🔍 Latest deploy log https://app.netlify.com/projects/openworkflow-editor/deploys/6af2e43725848e5a7cfd2e84

Copilot AI reviewed Nov 10, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

Reassigning the original content before the debounce expires fails to reset the editor, allowing a pending edit to overwrite the host’s value; an explicit reset mechanism and regression test are needed.

No open issues 🎉

1 file not reviewed
  • pnpm-lock.yaml: Generated file
What changed in this PR

Integrates the Dual Editor into the vanilla Web Component example, replacing the diagram-only integration with text and diagram panes for non-React hosts.

Changes:

  • Updates the custom element with JSON/YAML modes, a language-service worker, and content synchronization.
  • Adds unit and browser coverage for rendering, editing, external resets, and schema diagnostics.
  • Updates dependencies, example usage, and Shadow DOM guidance.
File Description
pnpm-lock.yaml Updates workspace dependency links.
examples/​vanilla-web-component/​tests/​dual-editor-element.test.ts Tests Dual Editor props and content synchronization.
examples/​vanilla-web-component/​tests-e2e/​diagram-editor.spec.ts Covers both panes, editing, resets, and diagnostics.
examples/​vanilla-web-component/​src/​index.ts Registers the renamed element and imports dual-editor styles.
examples/​vanilla-web-component/​src/​dual-editor-element.ts Wraps Dual Editor with worker and language support.
examples/​vanilla-web-component/​README.md Documents usage and the Shadow DOM hover workaround.
examples/​vanilla-web-component/​playwright.config.ts Enables clipboard access for browser tests.
examples/​vanilla-web-component/​package.json Replaces diagram-editor dependencies with dual/text editor packages.
examples/​vanilla-web-component/​index.html Demonstrates the editable Dual Editor in YAML mode.
.changeset/​dual-editor-vanilla-componet-example.md Records the example’s minor version change.

Review effort: Balanced

@kumaradityaraj
Copilot suggestions
885c4a7 
Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>
Copilot AI balanced review requested due to automatic review settings November 10, 2026 09:23
Copilot AI reviewed Nov 10, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

A pending edit callback can overwrite replacement content when the element is immediately removed or reparented, causing stale text to be restored on reconnect unless callbacks from older reset keys are ignored.

No open issues 🎉

1 file not reviewed
  • pnpm-lock.yaml: Generated file

Review effort: Balanced

@kumaradityaraj
Copilot suggestions
45a6af9 
Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>
Copilot AI balanced review requested due to automatic review settings November 10, 2026 09:30
Copilot AI reviewed Nov 10, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

There are no active review issues blocking the Dual Editor integration.

No open issues 🎉

1 file not reviewed
  • pnpm-lock.yaml: Generated file

Review effort: Balanced

fantonangeli
fantonangeli approved these changes Nov 10, 2026
View reviewed changes

@fantonangeli fantonangeli left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

lornakelly
lornakelly approved these changes Nov 10, 2026
View reviewed changes

@lornakelly lornakelly left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

This was referenced Nov 10, 2026
Closed
Closed
Open
Draft
@kumaradityaraj

kumaradityaraj commented Nov 11, 2026

Copy link
Copy Markdown
Contributor Author

@handreyrc please review this PR?

handreyrc
handreyrc approved these changes Nov 11, 2026
View reviewed changes

@handreyrc handreyrc left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@fantonangeli

fantonangeli commented Nov 11, 2026

Copy link
Copy Markdown
Member

@lornakelly can you please merge this PR?

@lornakelly
lornakelly merged commit fca4721 into open-workflow-specification:main Nov 11, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@lornakelly lornakelly lornakelly approved these changes
+2 more reviewers
@fantonangeli fantonangeli fantonangeli approved these changes
@handreyrc handreyrc handreyrc approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@kumaradityaraj @fantonangeli @lornakelly @handreyrc